$.componentInject(_COMPONENT_NAME_, function (params) {
    if (params.id) {
        var parentNode = $("oem-header-nav[_COMPONENT_NAME_ATTR_=" + params.id + "]");
        var childNode = parentNode.find(".oem-nav-parent-item");
        var moreNode = parentNode.find(".more-menu");
        var moreUlNode = parentNode.find(".more-menu-ul");
        var moreBodyNode = parentNode.find(".more-menu-body");
        var parentWidth = parentNode.innerWidth();
        var totalWidth = 0;
        var moreNodeWidth = moreNode.innerWidth();
        moreNode.hide();
        childNode.each(function (index, child) {
            totalWidth = totalWidth + $(child).innerWidth();
            if (!$(child).hasClass("more-menu") && totalWidth + moreNodeWidth > parentWidth) {
                var text = $(child).find(".oem-nav-parent-item-label a").text();
                var href = $(child).find(".oem-nav-parent-item-label a").attr("href");
                moreUlNode.append(
                    `<li class="text-base py-3 "> <a class="oem-nav-li-a flex items-center cursor-pointer" href="${href}">${text}</a></li>`
                );
                var childHtml = $(child).find(".oem-nav-child-body").html();
                moreBodyNode.append(` <div class="more-menu-body-panel grid grid-cols-3 gap-3 flex-1">${childHtml || ""}</div>`);
                $(child).remove();
                moreNode.show();
            }
        });
        moreUlNode.find("li").hover(function () {
            moreBodyNode
                .find(".more-menu-body-panel")
                .eq($(this).index())
                .attr("active", "true")
                .siblings(".more-menu-body-panel")
                .removeAttr("active");
        });
    }
});
